<template>
    <div class="banner">
        <img src="../../../images/4.webp" alt="">
        <ul>
            <li class="li1"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</template>

<script>
export default{
    name:'Banner',
    data(){
        return{
            msg:'这是中间！',
        };
    },
};
</script>

<style lang="scss" scoped>
    .banner{
        width: 680px;
        height: 300px;
        background-color: aqua;
        margin: 20px auto;
        border-radius: 30px;
        img{
            width: 100%;
            height: 100%;
            border-radius: 30px;
        }
        ul{
            width: 200px;
            height: 20px;
            // background-color: red;
            position: relative;
            left: 250px;
            bottom: 50px;
            display: flex;
            justify-content: space-around;
            li{
                width: 14px;
                height: 14px;
                // border: 2px solid black;
                background-color: rgb(214, 213, 213);
                border-radius: 50%;
            }
            .li1{
                background-color: darkorange;
            }
        }
    }
</style> 